<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org"
	xmlns:dt="http://github.com/dandelion/datatables"
	xmlns:sec="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Req1 &middot; List Projects</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="Dhrubo" />

<!-- Le styles -->
<link rel="stylesheet" type="text/css" media="all"
	href="css/bootstrap.css" th:href="@{/resources/css/bootstrap.css}" />
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

@media ( max-width : 980px) {
	/* Enable use of floated navbar text */
	.navbar-text.pull-right {
		float: none;
		padding-left: 5px;
		padding-right: 5px;
	}
}
</style>
<link rel="stylesheet" type="text/css" media="all"
	href="css/bootstrap-responsive.css"
	th:href="@{/resources/css/bootstrap-responsive.css}" />



<link rel="stylesheet" type="text/css" media="all"
	href="css/jquery.dataTables.css"
	th:href="@{/resources/css/jquery.dataTables.css}" />


<script src="js/jquery.js" th:src="@{/resources/js/jquery.js}"></script>
<script src="js/jquery.dataTables.js"
	th:src="@{/resources/js/jquery.dataTables.js}"></script>

</head>

<body>

	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<button type="button" class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="brand" href="#" style="color: yellow; font-weight: bold">Req1</a>
				<div class="nav-collapse collapse">

					<ul class="nav">
						<li><a href="#">Home</a></li>

						<li class="dropdown"><a href="#" class="dropdown-toggle"
							data-toggle="dropdown">Use Cases <b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newusecase">New</a></li>
								<li><a href="listusecases">View All</a></li>

							</ul></li>

						<li class="dropdown active"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown">Projects <b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newproject">New</a></li>
								<li><a href="listprojects">View All</a></li>

							</ul></li>


						<li class="dropdown" sec:authorize="hasRole('ROLE_COMPANY_ADMIN')"><a
							href="#" class="dropdown-toggle" data-toggle="dropdown">Users
								<b class="caret"></b>
						</a>
							<ul class="dropdown-menu">
								<li><a href="newuser">New</a></li>
								<li><a href="listusers">View All</a></li>

							</ul></li>


						<li><a href="#about">Docs</a></li>

						<!-- 
						<li class="dropdown"><a href="#"
							class="dropdown-toggle" data-toggle="dropdown">Tickets <b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="newproject">New</a></li>
								<li><a href="viewallprojects">View All</a></li>

							</ul></li>

						<li><a href="#about">Help</a></li>
						<li><a href="#contact">Contact</a></li>
						 -->


					</ul>


					<div class="pull-right">
						<ul class="nav pull-right">
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								th:text="'Hi! ' + ${#authentication.name}"
								data-toggle="dropdown">Welcome, User <b class="caret"></b></a>
								<ul class="dropdown-menu">
									<!-- 
									<li><a href="/user/preferences"><i class="icon-cog"></i>
											Preferences</a></li>
									<li><a href="/help/support"><i class="icon-envelope"></i>
											Contact Support</a></li>
									
									<li class="divider"></li>
									 -->
									<li><a href="j_spring_security_logout"><i
											class="icon-off"></i> Logout</a></li>
								</ul></li>
						</ul>
					</div>




				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div class="container-fluid">

		<div class="row-fluid">
			<div class="span6">
				<ul class="breadcrumb">
					<li><a href="home">Home</a> <span class="divider">/</span></li>

					<li class="active">List Projects</li>
				</ul>
			</div>
			<div class="span6">
				<div class="btn-group pull-right">
					<a class="btn btn-primary" href="newproject">New Project</a> 
					
				</div>
			</div>
		</div>




		<div class="row-fluid">

			<!--/span-->
			<div class="span12">


				<table id="myTableId" dt:table="true" dt:theme="bootstrap2"
					class="table table-striped table-bordered table-condensed">
					<thead>
						<tr>
							<th style="with: 5%">Sl#</th>
							<th>Name</th>
							<th>Created</th>
							<th>Updated</th>
							<th>Manager</th>
							
						</tr>
					</thead>
					<tbody>
						<tr style="with: 5%" th:each="p , row: ${projects}"
							th:with="c=${p.createdDate.toDate()}, l=${p.lastUpdatedDate.toDate()}">
							<td  style="width: 5%"><a href="details.html"
								th:href="@{/viewproject(project=${p.id})}"
								th:text="${row.count}">1</a>
							</td>
							<td>
								<a href="details.html"
								th:href="@{/viewproject(project=${p.id})}"
								th:text="${p.name}">1</a>
							</td>
							<td  >
							
								<a href="details.html"
								th:href="@{/viewproject(project=${p.id})}"
								th:text="${beans.pretty.format(c)}">1</a>
							
							</td>
							<td  >
								<a href="details.html"
								th:href="@{/viewproject(project=${p.id})}"
								th:text="${beans.pretty.format(l)}">1</a>
							
							</td>
							<td  >
							
								<a href="details.html"
								th:href="@{/viewproject(project=${p.id})}"
								th:text="${p.createdBy.name}">1</a>
							
							</td>
						</tr>
					</tbody>
				</table>


			</div>
			<!--/span-->
		</div>
		<!--/row-->

		<hr />



	</div>
	<!--/.fluid-container-->

	<div class="container">

		<div class="row-fluid">
			<div class="span12">
				<div class="span8">
					<a href="#">Terms of Service</a> <a href="#">Privacy</a> <a
						href="#">Security</a>
				</div>
				<div class="span4">
					<p class="muted pull-right">© 2013 Company Name. All rights
						reserved</p>
				</div>
			</div>
		</div>
	</div>

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->


	<script src="js/bootstrap-dropdown.js"
		th:src="@{/resources/js/bootstrap-dropdown.js}"></script>




</body>
</html>
